<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头</title>
<style type="text/css">
html,body,.containerBig{
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
.video-video-div{
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
video{
	object-fit:fill;
	width: 100%;
	height: 100%;
}
.containerBig{
	position: relative;
}
.playBtns{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
#play{
	background-image: url("img/bf.png");
	width: 64px;
	height: 64px;
	/*background-color: red;*/
}
/*视频居中样式*/
.videoCenter{
	width:50%;
	height: 50%;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	background-color: black;
}
/*loading图标*/
.loadingFa{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: none;
}
.sk-chase {
	width: 40px;
	height: 40px;
	position: relative;
	animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

.sk-chase-dot:before {
	content: '';
	display: block;
	width: 25%;
	height: 25%;
	background-color: #fff;
	border-radius: 100%;
	animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
	100% { transform: rotate(360deg); }
}

@keyframes sk-chase-dot {
	80%, 100% { transform: rotate(360deg); }
}

@keyframes sk-chase-dot-before {
	50% {
		transform: scale(0.4);
	} 100%, 0% {
		  transform: scale(1.0);
	  }
}
</style>
</head>
<body>
	<div class="containerBig">
		<div class="video-video-div videoCenter">
			<video id="video" muted width="100%" height="100%"></video>
		</div>
		<div class="playBtns">
			<input type="text" id="url" style="display: none;" value="rtsp://admin:p@ssw0rd@192.168.250.60:554/mpeg4">
			<div id="play"></div>
		</div>
		<div class="loadingFa">
			<div class="sk-chase">
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>-->
<script type="text/javascript" src="js/flv.min.js"></script>
<script type="text/javascript">
	let flvPlayer;
	var videoObject={
			init:function(id,src){
				console.log("-------"+src)
				var self=this;
				this.src=src;
				this.id=id;
				flvPlayer = flvjs.createPlayer(
							{type: 'flv',
								url:src,
								isLive: true,
								enableWorker: true,     //浏览器端开启flv.js的worker,多进程运行flv.js
								hasAudio: false,        //关闭音频
								hasVideo: true,
								enableStashBuffer: false,
								stashInitialSize: 128,
								duration:0,
								currentTime:0,
								}
							);
				flvPlayer.attachMediaElement(document.getElementById(id));
				flvPlayer.load();
				flvPlayer.play();
			    reLoad=function(){
					flvPlayer.unload();
		            flvPlayer.destroy();
		            window.v=videoObject.init(self.id,self.src);
				}

				flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
					console.log("errorType:", errorType);
					console.log("errorDetail:", errorDetail);
					console.log("errorInfo:", errorInfo);
					//视频出错后销毁重新创建
					if (flvPlayer) {
						reLoad()
					}
				});

			    return this;
			}
	}
$(function(){
	var src="rtsp://admin:123.comcom@192.168.1.8:554/h264/1/main/av_stream";
	//直播流
	// $.ajax({url:"/getRtspUrl",async:false,success:function(res){
	// 		src=res;
	// 	}});
	console.log("-----"+src)
	//回放流
	// $.ajax({url:"/playbacRtspkUrl",async:false,success:function(res){
	// 		src=res;
	// 	}});
	play()
	// $("#play").click(
			function play(){
		$('.loadingFa').css('display','block');

		if($.trim(src)!==""){
			if(window.v){
				window.v.flvPlayer.unload();
				window.v.flvPlayer.destroy();
			}
			window.v=videoObject.init("video",window.location.origin+"/live/"+window.btoa(src)+"/live.flv");

		}
		$('.playBtns').css('display','none');
		setTimeout(function(){
			$('.loadingFa').css('display','none');
		},5000)
	}
	// );

	// setInterval(() => {
	// 	if (flvPlayer.buffered.length) {
	// 		let end = flvPlayer.buffered.end(0);//获取当前时间值
	// 		let diff = end - flvPlayer.currentTime;//获取相差差值
	// 		console.log("===end===="+end)
	// 		console.log("====currentTime==="+flvPlayer.currentTime)
	// 		console.log("======="+diff)
	// 		if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
	// 			// flvPlayer.currentTime = flvPlayer.buffered.end(0)-0.0000000001;//手动跳帧
	// 		}
	// 	}
	// }, 2000); //5000毫秒执行一次

});
	
//获取地址栏参数
function getParameter(name,win){
	var params;
	if(null==win||undefined==win){
		params = window.location.search;
	}else{
		params = win.location.search;
	}
    params = params.substring(1, params.length);
    params = params.split("&");
    for (var i =0; i < params.length; i++){
        var items = params[i].split("=");
        var pname = items[0];
        if(pname == name){
            return items[1];
        }
    }
}
</script>
</html>